<template>
  <div class="person">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="add">点我+1</button>
"
  </div>
</template>

<script setup lang="ts" name="Person">
 import { onBeforeMount, ref,onMounted,onBeforeUnmount,onUnmounted,onBeforeUpdate,onUpdated } from 'vue'
let sum = ref(0)
 function add() {
    sum.value++
 }
 // 创建 setup替代了vue2中的beforeCreate和created
 // 挂载前
 onBeforeMount(() => {
    console.log('组件挂载之前')
 })
// 挂载完毕
onMounted(() => {
    console.log('子---组件挂载完毕')
})
//更新前
onBeforeUpdate(() => {
    console.log('组件更新之前')
})
//更新完毕
onUpdated(() => {
    console.log('组件更新完毕')
})
// 卸载前
onBeforeUnmount(() => {
    console.log('组件销毁之前')
})
// 卸载完毕
onUnmounted(() => {
    console.log('组件销毁完毕')
})

</script>

<style scoped>
.person {
    /* 背景颜色 */
    background-color: skyblue;
    /* 阴影 */
    box-shadow: 0 0px 10px;
    /* 圆角 */
    border-radius: 4px;
    padding: 20px; /* 内边距 */
  }
button { 
    margin: 0 5px;
}
</style>


